<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            box-sizing: border-box;
        }
        .header{
            width: 100%;
            height: 44px;
            text-align: center;
            line-height: 44px;
            background-color: aqua;
            color: #fff;
            position: fixed;
            left: 0;
            top: 0;
            z-index: 100;
        }
        .wrapper{
            width: 100%;;
            height: 44px;
            background-color: #8b90b1;
            background: -webkit-linear-gradient(270deg, rgba(68, 137, 254, 1), rgba(245, 245, 255, 1));
            padding-top: 44px;
            transition: .4s;
            position: relative;
            z-index: 90;
        }
        .wrapper .text{
            width: 100%;
            text-align: center;
            font-size: 14px;
            color: #333;
            position: absolute;
            bottom: 5px;
        }
        .list{
            width: 100%;
            height: auto;
            overflow: hidden;
            transition: .4s;
        }
        .item{
            width: 350px;
            height: 110px;
            border: 1px solid red;
            margin: 0 auto 20px;
        }
        .relese{
            height: 44px;
        }
        .tuo-cirle{
            width: 100%;
            height: 0;
            border-radius: 70%;
            background-color: #8b90b1;
            position: absolute;
            bottom: 0;
            transform: translateY(50%);
            transition: .4s;
        }
    </style>
</head>
<body>
    <div class="header">页面头部</div>
    <div class="wrapper">
        <div class="text">松开立即刷新</div>
    </div>
    <div class="list">
        <div class="item">今天天气真好</div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <script>
        var wrapper = document.getElementsByClassName('wrapper')[0];
        var list    = document.getElementsByClassName('list')[0];
        var start = "";
        var end = "";
        window.addEventListener('touchstart',(e)=>{
            start = e.changedTouches[0].clientY;
        },false);

        window.addEventListener('touchmove',(e)=>{
            end = e.changedTouches[0].clientY;
            end - start > 20 ? computedCation() : ""
        },false);

        window.addEventListener('touchend',(e)=>{
            end = e.changedTouches[0].clientY;
            console.log('end')
            end - start > 20  ? stopCation() : ""
        },false)
        function computedCation(){
			var xval = end - start;
			if (xval <= 20){
				return false
            }
            xPer = xval / 100;  //滚动百分比
			if (xval > 0 && xval < 80) {
                list.style.opacity = 1 - xPer;
				wrapper.style.height = (xPer * 200) + 'px';
			}else if(xval > 100) {
				wrapper.style.height = '200px';
			}
        }
        function stopCation(){
            end = 0;
            start = 0;
            wrapper.style.height = '124px';
            wrapper.children[0].innerText = "正在刷新"
            setTimeout(function(){
                wrapper.style.height = '44px';
            },1000)
            setTimeout(function(){
                wrapper.children[0].innerText = "松开立即刷新"
            },1200)
            list.style.opacity = 1;
        }
    </script>
</body>
</html>